<template>
  <div>
    <div class="root1"> </div>
    <div class="root2">
        <div class="root21">
            <div class="root211">11积分</div>
            <div class="root212"><s>￥166</s></div>
        </div>
        <div class="root22">双十一积分大礼包</div>
    </div>
    <div class="root3">
        <div>等级要求：铂金会员、黄金会员、白银会员</div>
        <div class="root31">兑换限制：铂金会员可兑换1件</div>
        <div class="root32">黄金会员可兑换1件</div>
        <div class="root32">白银会员可兑换1件</div>
    </div>
    <div class="root6">
        <div class="root61">已选</div>
        <div class="root62">优惠券礼包×1</div>
        <van-icon class="root63" name="ellipsis" />
    </div>
    <div class="root7"></div>
      <div class="root5">
        <div class="root4">兑换积分</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scooped>
.root1{
    width: 100%;
    height: 23.4375rem;
    background: url("https://file07.c.hihonor.com/pimages//product/LPJF990020221024001/group/800_800_91D205328776631BCB0F6B7E851E33197EF4BAE6638F9BD4mp.jpg");
    background-size:23.4375rem 23.4375rem ;
}
.root1 img{
    width: 23.4375rem;
    height: 23.4375rem;
}
.root2{
    width: 95%;
    height:5.55rem;
    margin: 0 auto;
    background-color: white;
    border-radius: .625rem;
    margin-top: -.625rem;
    padding:1rem;
}
.root21{
    display: flex;
}
.root211{
    font-size: 1.125rem;
    font-weight: 700;
    margin-right: 1.25rem;
}
.root212{
    color: rgb(178, 175, 175);
}
.root22{
    margin-top: .625rem;
}
.root3{
    width: 95%;
    height:7.5rem;
    margin: 0 auto;
    background-color: white;
    border-radius: .625rem;
    margin-top: .625rem;
    padding: 1rem;
    font-size: .875rem;
}
.root31{
    margin-top: .625rem;
}
.root32{
    margin-left:4.3rem;
}
.root4{
    width: 22.125rem;
    height:2.1875rem;
    border-radius: 1.09rem; 
    margin: 0 auto;
    background-color: rgb(49, 119, 218);
    margin-top:1.25rem ;
    text-align: center;
    line-height:2.1875rem;
    color: white;
}
.root5{
    height: 3.625rem;
    width: 100%;
    background-color: white;
    position: sticky;
    bottom: 0;
}
.root6{
    width: 95%;
    height:3.5625rem;
    border-radius: 1.09rem; 
    margin: 0 auto; 
    background-color: white;
    margin-top:.625rem ;
    padding: 1rem;
    display: flex;
}
.root61{
    font-size: .875rem;
    font-weight:700 ;
    margin-right: 1.25rem;
}
.root62{
    font-size: 1rem;
    margin-right: 9.375rem;
}
.root7{
    width: 95%;
    height: 148.4375rem;
    border-radius: 1.09rem; 
    margin: 0 auto; 
    padding: 1rem;
    margin-top:.625rem ;
    background: url("https://file05.c.hihonor.com/pimages/detailImg/2022/11/04//03144F279A84D2E5DD22B6B2E986B786AD8A31DA11D60E94.jpg" ) no-repeat;
    background-size:100%  100% ;
    background-color: white;
    
}
</style>